<template>
  <div>
    eventBus{{this.$route.params}}<br>
    {{$route.query}}<br>
    {{$route.hash}}<br>
    <achild></achild>
    <bchild></bchild>
    {{degValue}}-{{fontCount}}-{{backCount}}-{{id}}
  </div>
</template>

<script>
  import {EventBus} from '../../event-bus'
  import achild from './achild'
  import bchild from './bchild'

  export default {
    name: "eventBus",
    props: ['id'],
    components: {
      achild,
      bchild
    },
    data() {
      return {
        degValue: 0,
        fontCount: 0,
        backCount: 0
      };
    },
    mounted() {
      console.log('mounted')
      EventBus.$once("incremented", ({num, deg}) => {
        this.fontCount += num
        this.$nextTick(() => {
          this.backCount += num
          this.degValue += deg;
        })
      });
      EventBus.$on("decreased", ({num, deg}) => {
        this.fontCount -= num
        this.$nextTick(() => {
          this.backCount -= num
          this.degValue -= deg;
        })
      });
    },
    beforeDestroy() {
      EventBus.$off();
      console.log('out')
      console.log('beforeDestroy')
    }
  }
</script>

<style scoped>

</style>
